<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- Copyright © 2020 by www.x6k.com -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们俩</title>
    <link rel="stylesheet" href="俩/代码/css/bootstrap.min.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .wrap {
            position: relative;
            height: 100%;
            width: 100%;
            background-image: url("images/home.jpg");
            background-size: cover;
            background-position: center;
        }

        .wrap-son {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 1;
            background: rgba(59, 59, 59, 0.3);
        }

        .jumbotron {
            background: rgba(255, 255, 255, 0);
            color: #f5f5f5;
        }

        .love {
            color: #ffffff;
            margin: 0 20px;
            line-height: 1.3;
            font-weight: 300;
        }

        .hans-container {
            position: fixed;
            bottom: 0px;
            width: 100%;
            height: 120px;
            z-index: 1;
        }

        .timer b {
            font-size: 100px;
        }

        #s {
            font-size: 100px;
        }

        #updatalove,
        #to_comments {
            margin: 0 10px;
        }

        .copy {
            position: absolute;
            bottom: 0;
            color: #ffffff;
            font-size: 12px;
        }

        /* 评论 */
        .comment {
            margin-top: 50px;
            margin-bottom: 100px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="wrap-son">
            <div class="container-fluid">
                <div class="box">
                    <div class="jumbotron text-center">
                        <h1>我们相恋了</h1>
                        <h3 class="timer">-
                            <div class="row">
                                <b id="d"></b> 天 <b id="h"></b> 时 <b id="m"></b> 分
                            </div>
                            <div class="row">
                                <b id="s"></b> 秒
                            </div>
                        </h3>
                        
                    </div>
                </div>

                <div class="row">
                    <h4 class="love text-center"><span class="love-son"></span></h4>
                </div>

               

                <div id="hans-bolang"></div>
            </div>
        </div>
</div>

    <div class="container-fluid" id="comments">
        <div class="row comment">
            <div class="col-xs-10 col-sm-10 col-md-6 col-xs-push-1 col-sm-push-1 col-md-push-3">
                
                <div id="vcomments"></div>
            </div>
        </div>
    </div>

    <script src="俩/代码/js/jquery-1.11.0.js"></script>
    <script src="俩/代码/js/bootstrap.min.js"></script>
    <script src='俩/代码/js/Valine.min.js'></script><!-- Valine 评论系统 -->

    <!-- 计时器 -->
    <script>
        function timer() {
            var start = new Date( 2022, 0, 05, 21, 20, 00); 
            var t = new Date() - start;
            var h = ~~(t / 1000 / 60 / 60 % 24);
            if (h < 10) {
                h = "0" + h;
            }
            var m = ~~(t / 1000 / 60 % 60);
            if (m < 10) {
                m = "0" + m;
            }

            var s = ~~(t / 1000 % 60);
            if (s < 10) {
                s = "0" + s;
            }
            document.getElementById('d').innerHTML = ~~(t / 1000 / 60 / 60 / 24);
            document.getElementById('h').innerHTML = h;
            document.getElementById('m').innerHTML = m;
            document.getElementById('s').innerHTML = s;
        }
        timer();
        setInterval(timer, 1000);
    </script>

    <script>
        var oComments = document.querySelector("#comments");
        var oCommentsTop = Math.round(oComments.offsetTop);
        //运动框架
        function move() {
            // 1. 关闭开启定时器;
            clearInterval(timer);
            var timer = setInterval(function () {
                // 2. 计算速度;
                var iNow = document.documentElement.scrollTop || document.body.scrollTop; //100
                iNow = Math.round(iNow);
                var speed = (oCommentsTop - iNow) / 10;
                // 3. 速度取整;
                if (speed > 0) {
                    speed = Math.ceil(speed);
                } else {
                    speed = Math.floor(speed);
                }
                document.documentElement.scrollTop = document.body.scrollTop = iNow + speed + 1;
                // 4. 终止条件;
                if (iNow >= oCommentsTop) {
                    clearInterval(timer);
                }
            }, 20)
        }

        to_comments.onclick = move;
    </script>

   
</body>

</html>